<!-- footerTab -->
<template>
  <div class="tabFooter">
    <span class="left">共{{ totalCount }}条记录 第{{ params.pageIndex }}/{{ totalPage }}页</span>
    <el-row class="right">
      <el-button type="primary" :disabled="disabled1" :plain="true" size="small" @click="prevPage">上一页</el-button>
      <el-button class="rightBtn" :disabled="disabled2" type="primary" size="small" @click="nextPage">下一页</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    params: {
      type: Object,
      default: null
    },
    totalCount: {
      type: Number,
      default: 0
    },
    totalPage: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      disabled1: true,
      disabled2: false

    }
  },
  methods: {
  // 下一页
    nextPage() {
      if (this.params.pageIndex < this.totalPage) {
        this.params.pageIndex++
        // console.log(this.params.pageIndex++)
        this.$emit('nextPageFn', this.params.pageIndex)
        // this.fetchTaskList()
        this.disabled1 = false
      } else {
        this.disabled2 = true
      }
    },
    // 上一页
    prevPage() {
      if (this.params.pageIndex > 1) {
        // this.disabled1 = false
        this.params.pageIndex--
        this.$emit('prevPageFn', this.params.pageIndex)
        // this.fetchTaskList()
      } else if (this.params.pageIndex === 1) {
        this.disabled1 = true
      }
    }
  }
}

</script>
<style lang='scss' scoped>
.tabFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 0;
  padding-left: 10px;
  .left {
    font-size: 16px;
    color: #dbdfe5;
  }
  .right {
    .rightBtn{
      margin-left: 20px;
    }
  }
}
</style>
